{% extends "base.html" %}

{% block title %}Seiya 数据分析系统 - 薪资 Top10 城市{% endblock %}

{% block content %}
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">首页</a></li>
    <li class="breadcrumb-item"><a href="/job">拉勾网职位数据分析</a></li>
    <li class="breadcrumb-item active" aria-current="page">薪资 Top10 城市</li>
  </ol>
</nav>

<div class="my-5" id="chart"></div>

<table class="table table-striped my-5">
  <thead>
    <tr>
      <th scope="col">排名</th>
      <th scope="col">城市</th>
      <th scope="col">薪资</th>
    </tr>
  </thead>
  <tbody>
    {% for row in rows %}
    <tr>
      <th scope="row">{{ loop.index }}</th>
      <td>{{ row.city }}</td>
      <td>{{ row.salary }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endblock %}

{% block js %}
{{ super() }}
<script>
$.getJSON('/job/salary-top10.json', function (data) {
  var chart = new G2.Chart({
    container: 'chart',
    forceFit: true,
    height: 500
  });

  chart.source(data);
  chart.interval().position('city*salary');
  
  chart.render();
});
</script>
{% endblock %}